<template>
	<view class="container">
		<up-form labelPosition="left" :model="forumData" :rules="forumRules" ref="uFormRef">
			<up-form-item labelWidth="70" label="帖子标题" prop="postTitle">
				<up-input v-model="forumData.postTitle" border="bottom"></up-input>
			</up-form-item>
			<up-form-item labelWidth="70" label="帖子内容" prop="postContent">
				<up-textarea v-model="forumData.postContent" placeholder="请输入内容"></up-textarea>
			</up-form-item>

			<up-form-item labelWidth="70" label="上传图片" prop="images">
				<up-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="3" multiple
					:maxCount="9" :previewFullImage="true"></up-upload>
			</up-form-item>
		</up-form>


		<div class="edit_btn" @click="addForum">
			发布帖子
		</div>


		<up-toast ref="uToastRef"></up-toast>
	</view>
</template>

<script setup>
	import {
		apiAdd
	} from "@/api/forum.js"
	import {
		ref,
		onMounted,
		reactive
	} from 'vue';
	import {
		forumRules
	} from "./rules.js"
	const userInfo = ref({})
	const uToastRef = ref(null)
	const forumData = ref({
		postId: null,
		postTitle: "",
		postContent: "",
		coverImg: "",
		images: "",
		empId: null,
		communityId: null,
	})
	const uFormRef = ref(null)

	const fileList = ref([])



	// 删除图片
	const deletePic = (event) => {
		fileList.value.splice(event.index, 1);
	};

	// 新增图片
	const afterRead = async (event) => {
		// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
		let lists = [].concat(event.file);
		let fileListLen = fileList.value.length;
		lists.map((item) => {
			fileList.value.push({
				...item,
				status: 'uploading',
				message: '上传中',
			});
		});
		for (let i = 0; i < lists.length; i++) {
			const result = await uploadFilePromise(lists[i].url);
			console.log()
			let item = fileList.value[fileListLen];
			fileList.value.splice(fileListLen, 1, {
				...item,
				status: 'success',
				message: '',
				url: JSON.parse(result.data).data,
			});
			fileListLen++;
		}
	};

	const uploadFilePromise = (url) => {
		return new Promise((resolve, reject) => {
			let a = uni.uploadFile({
				url: 'http://localhost:8099/common/uploadOss', // 仅为示例，非真实的接口地址
				filePath: url,
				name: 'file',
				success: (res) => {
					resolve(res);
				},
			});
		});
	};





	//添加帖子
	const addForum = () => {
		uFormRef.value.validate().then(async () => {
			// 判断有没有上传图片
			if (fileList.value.length != 0) {
				forumData.value.coverImg = fileList.value[0].url
				let imgArr = []
				fileList.value.forEach((ele) => {
					imgArr.push(ele.url)
				})
				forumData.value.images = JSON.stringify(imgArr)
			}
			//获取用户信息
			forumData.value.empId = userInfo.value.empId
			forumData.value.communityId = userInfo.value.communityId
			try {
				await apiAdd(forumData.value)
			
				uToastRef.value.show({
					type: "success",
					title: '发布成功',
					message: "发布成功"
				})
				setTimeout(()=>{
						uni.navigateBack()
				},500)
			} catch (e) {
				uToastRef.value.show({
					type: "error",
					title: '发布失败',
					message: "发布失败"
				})
				//TODO handle the exception
			}
		}).catch(() => {
			// 处理验证错误  
			uToastRef.value.show({
				type: "none",
				title: '请填写表单内容',
				message: "请填写表单内容"
			})
		});
	}

	onMounted(async () => {
		//获取用户信息
		let userResult = await uni.getStorage({
			key: "empleyeeInfo"
		})
		userInfo.value = userResult.data
	})
</script>

<style scoped lang="scss">
	.container {
		width: 100vw;
		height: 100%;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.edit_btn {
		width: 90vw;
		border-radius: 20rpx;
		position: absolute;
		bottom: 200rpx;
		left: 50%;
		transform: translate(-50%, 0);
		height: 80rpx;
		background: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 36rpx;
		color: #fff;
		background-color: #F5B017;
	}
</style>
